<template>
  <el-dialog v-model="isOpen" :title="expandItem.name" width="1000" :before-close="handleClose">
    <GridPreviewView
        v-if="gridJson"
        v-model:queryData="queryData"
        v-model:editData="editData"
        :editDisables
        :gridJson="readonly(gridJson)"
        :mode
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="emit('editOk')">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { placeholder } from '@/utils/str.js'
import { ref, reactive, defineProps, computed, inject, readonly, onBeforeMount } from 'vue'
import GridPreviewView from '@/views/template/grid/json/preview/GridView.vue'
const member = JSON.parse(sessionStorage.getItem('member'))
// 网格设置统一获取
const api = inject('api')
const apiRequest = api.getApi('FaSysGrid')
const isOpen = ref(true)
const emit = defineEmits(['editOk'])
const props = defineProps(['expandItem', 'row'])
const expandItem = props.expandItem
const mode = ref('expand')

// 查询必填数据
const queryData = computed(() => {
  let editQueryData = { ...expandItem.queryData }
  // 覆盖上关联字段
  for (const [index, field] of expandItem.joinField.fields.entries()) {
    editQueryData[expandItem.joinField.joinFields[index]] = props.row[field]
  }
  // expandItem.joinField.fields.forEach((field, index) => {
  //   editQueryData[expandItem.joinField.joinFields[index]] = props.row[field]
  // })
  return reactive({ data: { ...editQueryData, extend: {} }, page: { pageNum: 1, pageSize: 20 } })
})

// 添加/编辑必填数据
const editData = computed(() => {
  let editEditData = { ...expandItem.editData }
  // 占位符处理
  extendPlaceholderHandle(editEditData)
  // 覆盖上关联字段
  expandItem.joinField.fields.forEach((field, index) => {
    editEditData[expandItem.joinField.joinFields[index]] = props.row[field]
  })
  return reactive(editEditData)
})

// 添加/编辑必填数据禁用
const editDisables = computed(() => {
  return reactive(Object.keys(editData.value))
})

const gridJson = ref(null)

onBeforeMount(() => {
  loadData()
})
function loadData() {
  apiRequest.getJson(expandItem.gridId).then((data) => {
    gridJson.value = data
  })
}

// 扩展功能占位符处理
function extendPlaceholderHandle(editEditData) {
  // 元数据
  let metaData = { ...props.row, _member: member }
  for (const key in editEditData) {
    editEditData[key] = placeholder(editEditData[key], metaData)
  }
}
// 叉掉弹出框
function handleClose(done) {
  emit('editOk')
  done()
}
</script>
<style scoped></style>
